<template>
  <view>
    <!-- <u-navbar :background="{backgroundColor: '#fff',}" title-size="34" title="我的社区" title-color="#000"
      back-icon-color="#000" :border-bottom="false">
      <view slot="right" style="margin-right: 40rpx;" v-if="resObj.escrow_id='28'"
        @click="$u.route('/pageA/member/myterritory2')">直系社员</view>
    </u-navbar> -->
    <view class="swiper_bg">
      <view class="u-f-ac u-f-jsb titles">
        <view class="u-f1">
          <u-icon name="arrow-left" size="36" color="#FFFFFF" @click="$u.route({type: 'back', delta: 1})"></u-icon>
        </view>
        <view class="u-f1 t-a-c" style="font-size: 36rpx;">我的团队</view>
        <view class="u-f1"></view>
      </view>
    </view>


    <view class="container">
      <view class="u-f-ajc u-f-column zong">
        <view class="u-f-ac u-f-jsb">
          <!-- <view>{{datas.mobile}}</view> -->
          <view>自购总额：{{resObj.base}}</view>
          <view>自购首单：{{resObj.first_amount}}</view>
        </view>
        <view class="u-f-ac u-f-jsb">
          <view>小区总额：{{datas.littleRegion}}</view>
          <view>直推单数：{{resObj.df_order_num}}</view>
        </view>
        <view class="u-f-ac u-f-jsb">
          <view>团队总额：{{datas.teamBase}}</view>
          <!-- <view>结算流水：{{resObj.base}}</view> -->
          <view>团队结算：{{resObj.settle_team_amt}}</view>
        </view>
      </view>

      <view class="items_box">

        <!-- 一级展开行 -->
        <view v-for="(item,index) in res" :key="index" style="padding: 0 10rpx;">
          <view class="u-f-ac items items2" v-if="index == 0">
            <view style="width: 31%;">手机号</view>
            <view>自购总数</view>
            <view>团队总额</view>
            <view>团队结算</view>
            <!-- <view>有效社员</view>
            <view>总业绩</view>
            <view>当日业绩</view>
            <view>查看社区</view> -->
          </view>
          <view class="u-f-ac items">
            <view style="width: 31%;">{{item.mobile}}</view>
            <view>{{item.base}}</view>
            <view>{{item.teamTotal[0] || 0}}</view>
            <view>{{item.settle_team_amt}}</view>
            <!-- <view>{{item.yx_num}}人</view>
            <view>{{item.yj}}</view>
            <view>{{item.tody_yj}}</view>
            <view>
              <switch style="flex: 1;" color="#000" :data-id="item.openid" @change.stop="switchChange" />
            </view> -->
          </view>
        </view>

        <view v-if="!res.length" style="margin: 200rpx 0;">
          <u-empty text="暂无数据" mode="list"></u-empty>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import * as API_Game from '@/api/members.js';
  export default {
    data() {
      return {
        res: [],
        openid: '',
        resObj: {},
        datas: {},
      }
    },
    onLoad: function() {
      this.setajax()
    },
    methods: {
      async setajax() {
        API_Game.memberTeamo().then(res => {
          this.datas = res
          this.res = res.team
          this.resObj = res.info;
        })
      },


    }
  }
</script>

<style lang="scss">
  page {
    background-color: #FFFFFF;
  }

  .swiper_bg {
    width: 100%;
    height: 420rpx;
    background: linear-gradient(to right, #FF6263, #DC2235);
    border-radius: 0 0 20rpx 20rpx;
    padding: 100rpx 30rpx 0;
    box-sizing: border-box;

    .titles {
      margin-bottom: 30rpx;
      position: relative;

      .abso_icon {
        position: absolute;
        left: 0;
      }

      view {
        font-size: 32rpx;
        color: #eee;
      }
    }
  }

  .zhuti-color {
    color: #1D2088;
  }

  .zhuti-bg-color {
    background-color: #1D2088;
  }

  .items_box {
    background-color: #EFEFEF;
    border-radius: 10rpx;
    overflow: hidden;
    padding: 30rpx 0;
  }

  .items {
    width: 100%;

    >view {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 90rpx;
      width: 23%;
      white-space: normal;
      word-break: break-all;
      font-size: 30rpx;
    }
  }

  .items2 {
    >view {
      height: 50rpx !important;
    }
  }

  .zong {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    background-color: #FFFFFF;
    border: 1px solid #DBDCDB;
    border-radius: 10rpx;
    margin-bottom: 50rpx;

    >view {
      width: 100%;
      color: #000;
      padding: 36rpx 30rpx;
      border-bottom: 1px solid #DBDCDB;
    }
  }

  .container {
    padding: 0 30rpx;
    margin-top: -220rpx;
  }
</style>